<template>
  <el-dialog width="80%" top="10vh" :title="$t('m.stock.productstock')" :visible.sync="popupVisible" :before-close="close" class="dialog-wrap">

    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" size="small">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.stock.code')">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.orderCode" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.page.location')">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.locationCode" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="right">
          <el-button type="primary" @click="search(formInline)" size="small">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool start -->

    <!-- table start -->
    <el-row>
      <el-col :span="24">
         <el-table
          ref="table"
          :data="tableData"
          stripe
          empty-text
          fit
          tooltip-effect="dark"
          style="width: 100%;">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50px"></el-table-column>
          <el-table-column align="center" prop="classname" :label="$t('m.type')"></el-table-column>
          <el-table-column align="center" prop="code" :label="$t('m.stock.code')" width="150px"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')" width="120px"></el-table-column>
          <el-table-column align="center" prop="inquantity" :label="$t('m.otherstore.inquantity')"></el-table-column>
          <el-table-column align="center" prop="outquantity" :label="$t('m.stock.outquantity')"></el-table-column>
          <el-table-column align="center" prop="beforequantity" :label="$t('m.stock.beforequantity')"></el-table-column>
          <el-table-column align="center" prop="afterquantity" :label="$t('m.stock.afterquantity')"></el-table-column>
          <el-table-column align="center" prop="creator" :label="$t('m.stock.creator')"></el-table-column>
          <el-table-column align="center" :label="$t('m.stock.createdate')" width="150px">
            <template slot-scope="scope">{{scope.row.createdate|createdateFilter}}</template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="currentChange"
          :small="true"
          background
          layout="prev, pager, next"
          :hide-on-single-page="true"
          :page-size="pageSize"
          :current-page="page"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- table end -->
    <el-row>
      <el-col :span="24" align="center">
        <el-button @click="close">{{$t('m.close')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  name:'stock-history-popup',
  props:['popupVisible','row'],
  data(){
    return {
      formInline:{
        orderCode:'', // 单据编号
        locationCode:'' // 库位
      },
      tableData:[],
      page:1,
      pageSize:10,
      total:0
    }
  },
  mounted(){
    this.getStockHistoryDetail()
  },
  filters:{
    createdateFilter(value){
      return value.substring(0,value.indexOf('.')).replace('T',' ')
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    search(){
      this.page = 1
      this.getStockHistoryDetail()
    },
    // 获取库存dialog信息
    getStockHistoryDetail(){
      let data = {
        warehouseId:this.row.warehouseid,
        partitionId:0,
        productSpecCode:this.row.productspeccode
      }

      let options = {
        withCredentials:false,
        method:'post',
        url:`${window._config_.stockUrl}/api/StockHistory/GetStockHistoryList`,
        data:Object.assign({},data,this.formInline,{pageIndex:this.page,pageSize:this.pageSize})
      }
      this.$axios(options).then(({data,count})=> {
        this.tableData = data
        this.total = count
        if(!data.length) return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    currentChange(page){
      this.page = page
      this.getStockHistoryDetail(this.page)
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-wrap ::v-deep .el-pagination{position: static; text-align: center; background-color: #fff;}
</style>